<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object.defineProperty</title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
    <h1>Object.defineProperty</h1>
    <p>什么是：数据代理，通过一个对象代理对另一个对象得属性操作（读 / 写）</p>
    <div id="root">
        <h2>view:</h2>
        <!-- 所有Vue有的属性，都能看见 -->
        <h2>{{viewModel}}</h2>
        <p>$options</p>
        <h2>{{$options}}</h2>

    </div>

    <script type="text/javascript">
        let person = {
            name: "hehe",
            sex: "male"
        };
        let number = 12
        Object.defineProperty(person,'age',{
            // value:{
            //     age1: 18,
            //     age2: 21
            // },
            // // default: false: 不可以被枚举;
            // enumerable: true,
            // // default: false; 不可以修改 
            // writable: true,
            // // fefault: false; 不可以删除
            // configurable: true
            // ====================================
            // 每一次访问这个属性，都会出发此get函数。
            // 保障每次获取的数据最新。
            get(){
                console.log(this)
                return number;
            },
            set(v){
                console.log("modified: ",v)
                number = v
            }
        });
        console.log("the person: 其中，age不可以被遍历枚举，且默认不可以被修改",person);
        Vue.config.productionTip = false;
        // const vue = 
        console.log("new Vue: viewModel, const vm");
        // 
        const vm = new Vue({
            
          el: "#root",
        // data的函数式写法。
           data() {
               console.log(this) // vue
               return {
                viewModel:  " model"
               }
           },
            // data:function(){
            //     console.log(this) // vue
            //    return {
            //     msg:{
            //         message: "$mount"
            //     },
            //     url:"https://www.baidu.com/"
            //    }
            // }
            // data: ()=>{
            //     // 建议不要使用箭头函数，不然Vue所管理的函数变为window托管。
            //     console.log(this) // window
            //    return {
            //     msg:{
            //         message: "$mount"
            //     },
            //     url:"https://www.baidu.com/"
            //    }
            // }
        }); // vm
    </script>
</body>
</html>